<template>
  <div>
    <div @click="handleDetail(item._id)">
      <img :src="item.pic" alt="" />
      <p>{{ item.title }}</p>
      <div v-for="star in item.star" :key="star.index" class="star">
        <img v-if="star >= 1.5" src="../../../assets/star.png" alt="" />
        <img
          v-else-if="star >= 0.5"
          src="../../../assets/ban-star.png"
          alt=""
        />
        <img v-else src="../../../assets/ban-star.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
  },
  methods: {
    handleDetail(id) {
      this.$router.push(`/movieDetail/${id}`);
    },
  },
};
</script>

<style scoped>
img {
  width: 220px;
  height: 320px;
}
p {
  text-align: left;
  font-size: 20px;
}

.star img {
  width: 20px;
  float: left;
  height: 20px;
}
</style>